<div id="echart" style="height: 800px"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript"
        src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript"
        src="http://api.map.baidu.com/getscript?v=3.0&ak=ZUONbpqGBsYGXNIYHicvbAbM&services=&t=20180629105706"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>

<script>
    var datas = {
        "武汉市": [114.311586, 30.598467],
        "咸宁市": [114.328519, 29.847056],
        "重庆市": [106.558437, 29.568996],
        "天津市": [117.20952, 39.093669],
        "成都市": [104.08153, 30.655823],
        "开封市": [114.314595, 34.802885],
        "漯河市": [114.023419, 33.58771],
        "濮阳市": [115.035593, 35.767593],
        "商丘市": [115.662449, 34.420202],
        "焦作市": [113.248549, 35.220964]
    }
    var datas = '{$geoCoordMap}';
    datas = JSON.parse(datas);
    map('echart', datas)

    function map(id, mapData) {
        var myChart = echarts.init(document.getElementById(id));

        function randomData() {
            return '';
            return Math.round(Math.random() * 100);
        }

        var data = [],
            geoCoordMap = mapData;
        for (var i in mapData) {
            data.push({name: i})
        }
        myChart.setOption({
            series: [{
                type: 'map',
                map: 'china'
            }]
        });
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };
        var option = {
            title: {
                text: '全国分公司分布',
                subtext: '团利网',
                sublink: '#',
                itemGap: 30,
                left: 'center',
                textStyle: {
                    color: '#1a1b4e',
                    fontStyle: 'normal',
                    fontWeight: 'bold',
                    fontSize: 40
                },
                subtextStyle: {
                    color: '#bbbbbb',
                    fontStyle: 'normal',
                    fontWeight: 'bold',
                    fontSize: 15
                }
            },

            tooltip: {
                trigger: 'item'
            },

            // visualMap: {
            //   min: 0,
            //   max: 100,
            //   left: 'left',
            //   top: 'bottom',
            //   text: ['高', '低'],
            //   calculable: true,
            //   inRange: {
            //     color: ['#ffffff', '#E0DAFF', '#ADBFFF', '#9CB4FF', '#6A9DFF', '#3889FF']
            //   }
            // },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    dataView: {
                        readOnly: false
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            geo: {
                map: 'china',
                zoom: 1,
                label: {
                    normal: {
                        show: true,
                        color: '#c1c4c8'
                    },
                    emphasis: {
                        show: false,
                        color: '#292929'
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#fbfbfb',
                        borderColor: '#b9b4b7'
                    },
                    emphasis: {
                        areaColor: '#6dc5ff'
                    }
                }
            },
            series: [
                {
                    name: '供需占比',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    symbolSize: 8,
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#ff0a08',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    }
                },
                {
                    type: 'map',
                    mapType: 'china',
                    geoIndex: 0,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data: [
                        {name: '北京', value: randomData()},
                        {name: '天津', value: randomData()},
                        {name: '上海', value: randomData()},
                        {name: '重庆', value: randomData()},
                        {name: '河北', value: randomData()},
                        {name: '河南', value: randomData()},
                        {name: '云南', value: randomData()},
                        {name: '辽宁', value: randomData()},
                        {name: '黑龙江', value: randomData()},
                        {name: '湖南', value: randomData()},
                        {name: '安徽', value: randomData()},
                        {name: '山东', value: randomData()},
                        {name: '新疆', value: randomData()},
                        {name: '江苏', value: randomData()},
                        {name: '浙江', value: randomData()},
                        {name: '江西', value: randomData()},
                        {name: '湖北', value: randomData()},
                        {name: '广西', value: randomData()},
                        {name: '甘肃', value: randomData()},
                        {name: '山西', value: randomData()},
                        {name: '内蒙古', value: randomData()},
                        {name: '陕西', value: randomData()},
                        {name: '吉林', value: randomData()},
                        {name: '福建', value: randomData()},
                        {name: '贵州', value: randomData()},
                        {name: '广东', value: randomData()},
                        {name: '青海', value: randomData()},
                        {name: '西藏', value: randomData()},
                        {name: '四川', value: randomData()},
                        {name: '宁夏', value: randomData()},
                        {name: '海南', value: randomData()},
                        {name: '台湾', value: randomData()},
                        {name: '香港', value: randomData()},
                        {name: '澳门', value: randomData()},
                        {name: '南海诸岛', value: randomData()}
                    ]
                }
            ]
        };
        myChart.setOption(option);
    }
</script>




